<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="beibei">
    <title>test</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        div#content {
           padding: 20px 15px;
        }

        img {
            width: 100%;
        }

        input{
            width: 100px;
            margin-bottom:15px; 
        }

        table{
            /* border-collapse: collapse; */
            margin: 10px;
            border: solid 1px #000;
        }

        td{
            color: #ffffff;
            cursor: pointer;
            text-align: center;
            border: solid 1px #000;
            width: 25px;
            height: 25px;
            line-height: 21px;
        }

        div.colorText{
            margin: 15px;
        }
    </style>
</head>

<body>
    <div id="content">
        <label for="">行数：</label>
        <input type="number" name="row"><br>
        <label for="">列数：</label>
        <input type="number" name="column">
        <button>生成表格</button>
    </div>
    <div class="colorText"></div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function () {

        //  要求：
        //  1) 任意输入行数或列数, 生成对应表格;
        //  2) 行数, 列数必须为正整数类型, 否则提示非法;(这里我用正则限制1-100, 避免网友测试输入过大值造成浏览器假死)
        //  3) 在生成表格的单元格中随机填入1到15之间的随机数, 并给每个单元格设置随机背景颜色;
        //  4) 点击任意单元格, 将其数和背景颜色输出显示;
        //  5) 效率要求：100*100生成表格时间小于3秒;
        //  6) 代码中要用到事件代理机制;
        //  7) 设计一种简单机制, 使单元格数小于255*255*255时, 颜色不重复
        //  8) 要求符合w3c验证, 兼容IE, Firefox, chrome等浏览器

        $("button").click(buildTable);

        $("body").on("click", "td", function () {
            var num = $(this).text();
            var color = $(this).css("backgroundColor");
            $("div.colorText").text(`您选择的区域数字是：${num}，颜色为：${color}`);
        })

        //生成表格
        function buildTable() {
            let rowNum = $("input[name='row']").val() * 1;
            let columnNum = $("input[name='column']").val() * 1;


            if (!rowNum || !columnNum) return alert("行数, 列数必须输入");
            if (!validNumber(rowNum) || !validNumber(columnNum)) return alert("行数, 列数必须为1-100正整数");

            //生成表格
            var tableHtml = '<table>';
            for (var i = 0; i < rowNum; i++) {
                tableHtml += "<tr>"
                for (var j = 0; j < columnNum; j++) {
                    tableHtml += "<td style='background-color:" + getBgColor() + "'>" + getRandom() + "</td>"
                }
                tableHtml += "</tr>"
            }

            tableHtml += "</table>";

            $("table").remove();
            $("body").append(tableHtml);

        }

        //校验输入数字是否为1-100正数；
        function validNumber(num) {
            if (num < 1 || num > 100) return false;

            if (!Number.isInteger(num)) return false;

            return true;
        }

        //1-15随机数
        function getRandom() {
            var num = Math.random() * 15;

            num = Math.ceil(num);

            return num;
        }

        //背景颜色机制
        var colorArr = [];
        function getBgColor() {
            var r = Math.floor(Math.random() * 255) + 1;
            var g = Math.floor(Math.random() * 255) + 1;
            var b = Math.floor(Math.random() * 255) + 1;
            if (!colorArr.includes({ r, g, b })) {
                colorArr.push({ r, g, b });
            } else {
                getBgColor(r, g, b);
            }
            return `rgb(${r},${g},${b});`
        }

    })
</script>

</html>